* {
    margin: 0;
    padding: 0;

    a {
        text-decoration: none;
        color: #fff;
    }
}

body {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: relative;
}

// 导航栏
.menu {
    position: absolute;
    z-index: 99;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80px;
    background: rgba(0, 0, 0, 0.3);

    .w {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 65%;

        .log {
            a {
                width: 159px;
                height: 46px;


            }
        }

        ul {
            width: 360px;
            display: flex;
            justify-content: space-around;
            list-style: none;

            &:nth-child(2) {
                width: 260px;

                li {
                    a {
                        font-size: 20px;

                        color: #31c27c;

                    }

                    &:nth-child(2) a {
                        color: #fff;
                    }
                }


            }


            &:nth-child(3) {

                li {
                    margin-right: 20px;

                    a {
                        font-size: 20px;


                    }
                }

            }



        }
    }
}


//第一部分内容
.mod_banner {
    position: relative;
    display: flex;
    justify-content: center;

    width: 100%;
    height: 650px;
    background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/banner_pc.jpg?max_age=2592000&v=180d42ed7af7320f0f71b0d4bd1648b3")50% no-repeat;
    background-size: cover;

    padding-top: 130px;

    ul {
        li {
            // 后面三个背景样式
            height: 350px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -205px;

            .title {

                margin-bottom: 60px;
                width: 623px;
                height: 145px;
                background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
                background-position: 0 0;

            }

            a {
                display: block;
                width: 293px;
                height: 69px;
                background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
                background-position: -416px -859px;

            }

            //第一个背景样式
            &:nth-child(1) {
                transform: translate(-50%, 0);

                .title {
                    width: 587px;
                    height: 145px;
                    background-position: 0 -312px;

                }

                a {

                    margin: 0 auto;
                    display: block;
                    width: 293px;
                    height: 69px;
                    background-position: -416px -859px;
                }
            }
        }
    }


    .nav {
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: stretch;
        width: 100%;
        height: 190px;
        border-top: 1px solid rgba(255, 255, 255, 0.123);

        div {

            width: 110px;
            height: 170px;

            margin-right: 200px;
            opacity: 0.5;

            // https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000
            &:nth-child(1) {
                background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
                background-position: -366px -940px;

            }

            &:hover {
                opacity: 1;

            }

            &:nth-child(2) {
                background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
                background-position: -244px -940px;
            }

            &:nth-child(3) {
                background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
                background-position: -122px -940px;
            }

            &:nth-child(4) {
                background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
                background-position: 0 -940px;
                margin-right: 0;
            }
        }
    }
}


//  公用样式
.active {
    border-top: 2px solid #fff;
    opacity: 1 !important;
}


// <!-- 第一部分内容背景公共样式-->
.active1 {

    display: block !important;
}


// 第二部分内容样式
.mod_banner2 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    height: 880px;
    justify-content: space-between;
    width: 100%;

    h2 {
        position: absolute;
        z-index: 99;
        top: 50%;
        left: 50%;
        margin-left: -283px;
        margin-top: -100px;
        width: 566px;
        height: 74px;
        background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
        background-position: -556px -630px;
    }

    p {
        position: absolute;
        z-index: 99;
        top: 50%;
        left: 50%;
        margin-top: 0;
        margin-left: -202px;
        width: 404px;
        height: 69px;
        background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
        background-position: 0 -859px;
    }


}

// 第三部分内容样式

.mod_banner3 {
    position: relative;
    height: 900px;
    width: 100%;
    background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/bg_lyric.jpg?max_age=2592000&v=5464800f108995331d80b69b1347f97e") 50% no-repeat;
    background-size: cover;

    h2 {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -504px;
        margin-top: -130px;
        width: 554px;
        height: 149px;
        background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
        background-position: 0 -469px;
        z-index: 99;
    }

    p {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -504px;
        margin-top: 50px;
        width: 468px;
        height: 69px;
        background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
        background-position: -636px -493px;
        z-index: 99;
    }

    .shouji1 {
        position: absolute;
        top: 138px;
        right: 232px;
        width: 350px;
        height: 604px;
        background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/lyric_phone1.jpg?max_age=2592000&v=0920aa83769198cd32861e91ff91b419");
        transform: rotate(7.5deg);
        z-index: 99;

    }

    .shouji2 {
        position: absolute;
        top: 0;
        right: 100px;
        width: 580px;
        height: 892px;
        background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/lyric_phonebox.png?max_age=2592000&v=fb521d645a37e6de17484aee4e64561b");
        z-index: 99;
    }
}

// 第四部分内容样式
.mod_banner4 {
    position: relative;
    height: 900px;
    width: 100%;
    background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/bg_like.jpg?max_age=2592000&v=9c49432b5307f2ef106755e1fb2ec2f0") 50% no-repeat;
    background-size: cover;

    h2 {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -113px;
        width: 615px;
        height: 143px;
        background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
        background-position: 0 -157px;
        z-index: 99;
    }

    p {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: 68px;
        width: 550px;
        height: 69px;
        background-position: 0 -778px;
        background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");

        z-index: 99;
    }

    .shouji1 {
        position: absolute;
        top: 176px;
        left: 253px;
        width: 374px;
        height: 500px;
        background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/like_phone.jpg?max_age=2592000&v=8227cf61e88e1baf74175ebec7b44ce2")50% no-repeat;
        ;
        transform: rotate(-5.5deg);
        z-index: 99;

    }

    .shouji2 {
        position: absolute;
        top: 0;
        left: 220px;
        width: 450px;
        height: 778px;
        background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/like_phonebox.png?max_age=2592000&v=2a0441b5333d125826ef52995f5debea");
        z-index: 99;
    }
}

//第五部分内容样式
.mod_banner5 {
    position: relative;
    height: 900px;
    width: 100%;
    background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/bg_synchro.jpg?max_age=2592000&v=03957a8ab35fe6539846468d732d17ec") 50% no-repeat;
    background-size: cover;

    h2 {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -580px;
        margin-top: -270px;
        width: 544px;
        height: 136px;
        background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
        background-position: 0 -630px;
        z-index: 2;
    }

    p {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -580px;
        margin-top: -108px;
        width: 454px;
        height: 63px;
        background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
        background-position: -562px -778px;
        z-index: 2;
    }

    .diannao {
        position:absolute;
        top: 50%;
        left: 50%;
        margin-top: -392px;
      
        
        .diannao1 {
            position: absolute;
            top: 0;
            left: 0;
            // margin-top: -392px;
            width: 620px;
            height: 784px;
            background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/synchro_mac1.png?max_age=2592000&v=6c3adb96fb72e2db6d300ae3751a37ea") 0 0 no-repeat;
            z-index: 2;
        }

        .diannao2 {
            position: absolute;
            top:407px;




            
            left: 0px;
          
           
            width: 620px;
            height: 376px;
            background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/synchro_mac2.png?max_age=2592000&v=4410fc339fa0c0b88ee700ee1978a1c2") 0 0 no-repeat;
        }
    }


}

// 底部
.foot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 72px;
    background: rgba(0, 0, 0, .3);
    z-index: 99;

    p {
        text-align: center;
        font-size: 12px;
        line-height: 25px;
        color: #fff;
    }
}


// 第二部分内容的图片动画
@keyframes div1 {
    0% {
        opacity: 0;
        transform: scale(1.7);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}

// 每个部分的向下箭头样式
.xiangxiajiantou {
    position: absolute;
    bottom: 32px;
    left: 50%;
    margin-left: -18px;
    width: 36px;
    height: 20px;
    background-image: url("https://imgcache.gtimg.cn/mediastyle/app/download/sprite/img_index_6bc275f9.png?max_age=2592000");
    background-position: -1091px -161px;
    animation: iconArrow 1.5s infinite both 2s;
    z-index: 99;
}

// 每个部分的向下箭头的动画
@keyframes iconArrow {


    0% {
        opacity: 0;
        transform: translate3d(0, -8px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }
}

.liuxing {
    position: absolute;
    top: -150px;
    right: 110px;
    width: 108px;
    height: 152px;
    background: url("https://imgcache.gtimg.cn/mediastyle/app/download/img/index/star.png?max_age=2592000&v=914999ca83eaf3206e7364e9e2180b91") 0 0 no-repeat;
    background-size: cover;
    z-index: 999;
    animation: liuxing 2s linear;
}

//流星的动画
@keyframes liuxing {
    0% {
        opacity: 1;
        transform: translate(0, 0);

    }

    100% {
        opacity: 0;
        transform: translate(-700px, 1050px);

    }
}